<template>
	<!-- 系统目录 西成药品 -->
	<div class="MedicenCata">
		<!--  描述  -->
		<div class="header">
			<div class="header-icon">
				<i class="el-icon-ydml"
					style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;;background-color: #409EFF;color: #fff;"></i>
				<span style="font-size: 12px;font-weight:400;margin-left: 12px;">药典目录</span>
			
			</div>
		</div>
		<!-- main -->
		<div class="main">
			<!-- left -->
			<div class="main-left">
				<!-- tree -->
				<el-tree 
				:data="elTree" 
				v-loading="loading"
				element-loading-spinner="el-icon-more-outline"
				:props="defaultProps"
				node-key="label"
				:default-expanded-keys="['全部']"
				accordion 
				@node-click="handleNodeClick"
				class="custom-tree"
				>
					<span class="custom-tree-node" slot-scope="{ node, data }" style="font-size: 12px;">
						<span :name="node.label">
							<i v-if="!data.children"
							:class="node.expanded ? 'el-icon-openFile' : 'el-icon-closeFiles'"></i>
							<i v-else class="el-icon-openFile"></i>{{ node.label }}
						</span>
					</span>
				</el-tree>
			</div>
			<!-- right -->
			<div class="main-right">
				<!-- tit -->
				<div class="main-icon">
					<div class="main-icon-a">
						<i :class="iconComes" style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;;background-color: #5a5a5a;color: #fff;"></i>
						<span style="font-size: 12px;font-weight:bold;margin-left: 12px;color: #606266;">{{ CatalogueName }}</span>
					</div>
					<!-- btn1 -->
					<div class="main-icon-b">
						<span style="font-size: 12px;color: #606266;font-weight: bold;">状态：</span>
						<el-dropdown @command="handleCommand" trigger="click">
							<span class="el-dropdown-link">{{ DropDownedName }}<i class="el-icon-down"></i></span>
							<el-dropdown-menu slot="dropdown">
							  <el-dropdown-item command="a">可用</el-dropdown-item>
							  <el-dropdown-item command="b">禁用</el-dropdown-item>
							  <el-dropdown-item command="c" divided>全部</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					<!-- btn2 -->
					<div class="main-icon-c">
						<span style="font-size: 12px;color: #606266;font-weight: bold;display: inline-block;width: 68px;">关键字：</span>
						<el-input size="mini" placeholder="编码、名称、拼音简码" v-model="searchValue" style="cursor: pointer;">
							<i slot="suffix" class="el-icon-Ssearch" @click="doSearch" style="margin-right: 8px;"></i>
						</el-input>
					</div>
					<!-- btn3 -->
					<div class="main-icon-c">
						<el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini" @click="handClick(i)">{{ v.title }}</el-button>
					</div>
				</div>
				<!-- 新增 -->
				<div class="addDiction">
					<addDictionaries ref="addson"></addDictionaries>
				</div>
				<!-- 修改 -->
				<div class="addDiction">
					<editDictionaries ref="editson"></editDictionaries>
				</div>
				<!-- 查看 -->
				<div class="watchDictionaries">
					<watchDictionaries ref="watchson"></watchDictionaries>
				</div>
				<!-- table -->
				<div class="table">
					<el-table :data="tableData" border @row-dblclick="handledbRow" v-loading="loading" :style="{ width: windowWidth + 'px' }">
						<el-table-column label="药理类别">
						    <template slot-scope="scope">
							  {{ scope.row.drugCategory }}
							</template>
						</el-table-column>
						<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
						<!-- edit -->
						<el-table-column fixed="right" label="操作" width="88">
						  <template slot-scope="scope">
							  <div class="editbox" style="text-align: center;">
								<el-button type="text" @click="editFormValue(scope.row)" size="mini">编辑</el-button>
								<el-button type="text" @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
							  </div>
						  </template>
						</el-table-column>
						<!-- fixed -->
						<el-table-column fixed="left" label="行号" type="index" width="50"></el-table-column>
					</el-table>
					<!-- <span v-if="noData"> {{ noData }} </span> -->
				</div>
				<!-- 分页 -->
				<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageNum"
				:page-sizes="[8, 10, 20]"
				:page-size="pageSize"
				:total="totalSize"
				layout="total, sizes, prev, pager, next, jumper"
				background
				>
				</el-pagination>
			</div>
		</div>
		<!-- feet -->
		<div class="feet">
	
		</div>

	</div>
</template>

<script>
	// selfs / js
	import Pinyin from "@/external/pinyin.js";
	import Chinese from "@/external/PY.js";
	// import MedicenCata from '@/external/MedicenCata.js'
	//  selfs / props
	import addDictionaries from './Dictionaries/addDictionaries.vue'
	import editDictionaries from './Dictionaries/editDictionaries.vue'
	import watchDictionaries from './Dictionaries/watchDictionaries.vue'
	// 接口
	import { selectDrugCatalogue,getDrugType }  from "@/api/systemCatalogue/MedicenCata.js";
	export default {
		inject: ['reload'], // 无痕刷新
		components: {
			addDictionaries,
			editDictionaries,
			watchDictionaries
		},
		data() {
			return {
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				// str
				toCode:'',
				windowWidth: '', //表格自适应宽度
				searchValue:'',
				CatalogueName:'药典目录',
				DropDownedName:'',
				iconComes:'el-icon-ydml',
				// boolean
				loading:false,
				disabled:true,
				// number

				pageNum: 1, //当前页currentPage
				pageSize: 8,
				totalSize: 10, //总条数
				pageSizeSave:0,
				// arr
				form: {},
				editform:{},
				// title右侧按钮
				headerBtn:[
					{ title:"新增药典基础信息", type:"primary" },{ title:"刷新", type:"", icon:"el-icon-refresh", loading:false}, { title:"高级", type:"", icon:"", loading:false},
				],
				// tableRows
				tableRows:[
					{ name:"系统序号", prop:"id", drugType:"" },{ name:"编码", prop:"code", drugType:"" },{ name:"名称", prop:"genericName", drugType:"" },
					{ name:"药品类型", prop:"drugType", drugType:""},{ name:"药品剂型", prop:"drugDosage", drugType:"" },{ name:"毒麻类型", prop:"poisonousType", drugType:"" },
					{ name:"药理类别", prop:"drugCategory", drugType:"" },{ name:"抗生素等级", prop:"antibioticLevel", drugType:"" },
					{ name:"抗生素否", prop:"isAntibioticName", drugType:"" },{ name:"OTC否", prop:"isOtc", drugType:"" },{ name:"内服否", prop:"oral", drugType:"" },
					{ name:"操作时间", prop:"operatingTime", drugType:"" },{ name:"操作人", prop:"userName", drugType:"" },{ name:"有效状态", prop:"status", drugType:"" }
				],
				elTree:[
					{
						label: '全部',
						path:'',
						title:'',
						icon:'el-icon-news',
						children: [
							{
								label: '西药',
								path:'',
								title:'西药',
								icon:'el-icon-xy',
							}, 
							{
								label: '中成药',
								path:'',
								title:'中成药',
								icon:'el-icon-zhongchengyao',
							}, 
							{
								label: '中草药',
								path:'',
								title:'中草药',
								icon:'el-icon-zhongcaoyao',
							}, 
							{
								label: '民族药',
								path:'',
								title:'民族药',
								icon:'el-icon-mzy',
							}, 
							{
								label: '血液',
								path:'',
								title:'血液',
								icon:'el-icon-xyzp',
							}, 
							{
								label: '疫苗',
								path:'',
								title:'疫苗',
								icon:'el-icon-yimiaoke',
							},
						]
					}
				],
				tableData: [
					{ id:'1', code:'X0000001164', genericName: '尼可刹米注射液', drugType:'西药', drugDosage:'注射剂', poisonousType:'普通药',yt:'非液体',lc:'', drugCategory:'神经系统用药', sonKinds:'中枢神经兴奋药',IIIkinds:'', ATC:'否', TATC:'否', OTC:'否', oral:'否', date: '2024-11-26 21：30：22', Opter:'admin', status: '可用', nz: '否',yn:'否',ps:'否',js:'否',zl:'否',rs:'否',priceKinds:'西药费',jk:'否',db:'否',dangerous:'非高危药品',remark:' ' },
					{ id:'2', code:'X0000001165', genericName: '注射用重组人白介素_2（123ALA）', drugType:'西药', jix:'注射剂',yt:'非液体',lc:'', poisonousType:'普通药', drugCategory:'血液系统用药', sonKinds:'升血细胞药',IIIkinds:'升血小板药', ATC:'否', TATC:'否', OTC:'否', oral:'否', date: '2024-11-02 08：28：02', Opter:'杨勇', status: '可用', nz: '否',yn:'否',ps:'否',js:'否',zl:'否',rs:'否',priceKinds:'西药费',jk:'否',db:'否',dangerous:'非高危药品',remark:' ' },
				],
			};
		},
		computed: {
		   
		  },
		mounted() {
			// 数据源
			this.loadData();
			//获取动态盒子宽度，实时赋值给右侧 =i> this.$refs.mainRight.offsetWidth;
			this.$nextTick(()=>{
				this.updateWindowWidth();
				window.addEventListener('resize', this.updateWindowWidth);
			});
		},
		methods: {
			/*
				数据源
			*/
			async loadData(){
				// 所有目录
				let res = await selectDrugCatalogue({
					condis:this.searchValue,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				});
				if(res.code === 200){
					this.loading = true
					setTimeout(() => {
						this.tableData = res.data.content;
						this.loading = false
						// this.tableData.forEach(item => {
						// 	item.drugDosage ? item.drugDosage = item.formName : item.drugCategory;
						// 	item.drugCategoryChild ? item.drugCategoryChild = item.drugCategoryChildName : item.drugCategoryChild;
						// 	item.threeLevelDrugCategory ? item.threeLevelDrugCategory = item.threeLevelDrugCategoryName : item.threeLevelDrugCategory;
						// 	item.poisonousType ? item.poisonousType = item.poisonName : item.poisonousType = item.poisonousType ;
						// 	item.drugCategory ? item.drugCategory = item.drugCategoryName : item.drugCategory;
						// 	item.isOtc == '1' ? item.isOtc = "是" : item.isOtc = '否';
						// 	item.oral == '1' ? item.oral = "是" : item.oral = '否';
						// 	item.status == '1' ? item.status="可用" : item.status="锁定";
						// 	item.isAntibiotic == '1' ? item.isAntibiotic = "是" : item.isAntibiotic = '否';
						// });
						// console.log(this.tableData);
					},1500)
					
				}else{
					this.tableData=[]
				}
			},
			// suffix按钮搜索
			doSearch(){
				this.loadData();
			},
			Change(){
				
			},
			
			/*
				about tree
			*/
			async handleNodeClick(data) {
				console.log(data);
				this.CatalogueName = data.title
				this.iconComes = data.icon
				let res = await selectDrugCatalogue({
					label:this.CatalogueName,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				if(res.code === 404){
					this.loading = true
					setTimeout(() => {
						this.tableData = []
						this.loading = false
					},1500)
					
				}else{
					this.loading = true
					setTimeout(() => {
						this.tableData = res.data.content
						this.loading = false
					},1500)
					
				}
			},
			// 选择值
			handClickName(val){
				console.log(val);
			},
			//新增保存
			addNewDiction(){
				
			},
			// edit
			editFormValue(row){
				this.$refs.editson.openeditdialog(row);// 调用子组件打开新增Model
			},
			handleDelete(rowId){
				console.log(rowId);
			},
			// 编辑保存
			saveEditData(){
				
			},
			
			/*
				选择框
			*/

			/*
				about input
			*/

			/*
				about table
			*/
		   // col 里面包含了表头字段和名称，list 是表格数据
		    columnWidth(col, list) {
		         let prop = col.prop,lab = col.lab;
		         let width = 20; // 设定一个最小值
		         let maxlenStr = ""; // 最长字符串
		         for (let info of list) {
		           if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
		         }
		         width = Math.max(width, len(lab), len(maxlenStr));
		         // 表格自带的内边距(20px) 自调
		         return width + 12; // 这里加了 12px
		   
		         function len(str) {
		           // 实际分配长度可根据需要自行调整
		           let length = 0;
		           for (const char of str + "") {
		             // 英文小写字符 8px
		             if ("a" <= char && char <= "z") length += 8;
		             // 英文大写字符 12px
		             else if ("A" <= char && char <= "Z") length += 12;
		             // 中文字符 16px
		             else if (char >= "\u4e00" && char <= "\u9fa5") length += 32;
		             // 其他 8px
		             else length += 8;
		           }
		           return length;
		         }
		       },
			// 新增等步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						this.$refs.addson.openAddModel();// 调用子组件打开新增Model
					break;
					case 1:// 处理索引1的逻辑 页面刷新
						this.loading = true;
						setTimeout(() => {
							this.reload();
							this.$message({type:'success',message:'已刷新'})
							this.loading = false;		
						}, 1500)
					break;
					case 2:
						// 处理索引2的逻辑
						this.$message({ type: "info", message: "暂不支持,请联系工作人员!"});
					break;
				}
			},
			// db events 双击表格行
			handledbRow(row, column, event){
				if(row){ 
					// this.watchValue = row
					console.log(row,'双击过后查看');
					this.$refs.watchson.opendialog();// 调用子组件打开新增Model
				} else { 
					console.log('fail')
				}
			},
			handleAddClose(done) {
				this.$confirm('确认关闭？')
				  .then(_ => {
					this.formdisabled = true;
					location.reload();
					done();
				  })
				  .catch(_ => {
					this.formdisabled = this.formdisabled;
				  });
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
				  .then(_ => {
					this.formdisabled = true;
					location.reload();
					done();
				  })
				  .catch(_ => {
					this.formdisabled = this.formdisabled;
				  });
			},
			handleCommand(command) {
			  // 这里的 command 就是你点击的菜单项的 command 属性值
			  // console.log(command);
			  // 根据 command 值执行相应的逻辑
			  switch (command) {
				case 'a':
				  // 处理a的逻辑
				  console.log('执行A逻辑');
				  this.DropDownedName = '可用'
				  break;
				case 'b':
				  // 处理b的逻辑
				  console.log('执行B逻辑');
				  this.DropDownedName = '禁用'
				  break;
				case 'c':
				  // 处理b的逻辑
				  this.DropDownedName = '全部'
				  break;
				// ... 其他 case
			  }
			},
			// 拦截

			//分页
			//每页条数改变触发
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageNum = val;
			},
			//当前条数改变触发
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pageNum = val;
			},
			// 实时宽度
			updateWindowWidth() {
			    this.windowWidth = window.innerWidth - 228;
			},
		}
	}
</script>

<style lang="less" scoped>
	// 穿透
	/deep/ .el-dialog__header{
		padding: 12px;
		background-color: #007bb0;
	}
	/deep/ .el-dialog__title{
		font-size: 12px;
		color: #fff;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close{
		color: #fff;
	}
	
	/deep/ .el-icon-arrow-left:before {
	    content: "\e67d";
	    font-size: 18px;
	}
	/deep/ .el-icon-arrow-down:before {
	    content: "\e659";
	    font-size: 12px;
	}
	/deep/ .el-dropdown-menu__item{
		font-size: 12px;
	}
	/deep/ .el-dropdown-menu__item{
		font-size: 12px;
	}
	/deep/ .el-dialog__body{
		padding: 30px;
	}
	/deep/ .el-descriptions{
		font-size: 12px !important;
	}
	/deep/ .el-descriptions-item__container{
		display: flex !important;
		// align-items: center !important;
		padding-top: 12px !important;
	}
	/deep/ .el-descriptions-item__label:not(.is-bordered-label){
		padding-left: 0;
		width: 66px;
		display: flex;
		justify-content: right;
	}
	/deep/ .el-color-picker__icon, .el-input, .el-textarea{
		width: 100%;
	}
	.MedicenCata {
		height: 100%;
		width: 100%;
		// header
		.header {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 40px;
			background-color: #efefef;
			padding: 4px;

			// justify-content: space-evenly;
			// icon
			.header-icon {
				display: flex;
				align-items: center;
				justify-content: start;
				.header-btn{
					margin-left: 20px;
				}
			}

		}

		// main
		.main {
			width: 100%;
			display: flex;
			justify-content: left;
			padding: 4px;
			// left
			.main-left {
				/deep/ .el-tree-node__content {
					height: 40px;
					padding-left: 0 !important;
				}
				/deep/ .el-tree-node__label{
					font-size: 12px;
				}
				width: 6%;
				background-color: red;
				height: 100%;
			}

			// right
			.main-right {
				width: 90%;
				height: 100%;
				// icon
				.main-icon {
					display: flex;
					align-items: center;
					padding: 12px;
					line-height: 40px;
					.main-icon-a{
						// width: 240px;
						// background-color: #00557f;
					}
					.main-icon-b{
						margin-left: 28px;
						/deep/ .el-dropdown{
							font-size: 12px;
							cursor: pointer;
						}
						/deep/ .el-dropdown:hover {
							font-weight: bold;
							color: #66b1ff;
						}
						/deep/ .el-icon--right{
							// background-color: #66b1ff;
						}
						/deep/ .el-popper[x-placement^=bottom]{
							margin-top: 0;
						}
					}
					// c
					.main-icon-c{
						margin-left: 28px;
						display: flex;
						/deep/ [data-v-2bacc09b] .el-color-picker__icon, .el-input[data-v-2bacc09b], .el-textarea[data-v-2bacc09b]{
							width: 80%;
						}
					}
				}
				
				// add
				.addDiction{
					.box{
						.abox{
							span{
								border: 1px solid #66b1ff;
								display: flex;
							}
						}
					}
					/deep/ .el-form{
						padding: 12px;
						display: flex;
						justify-content: start;
						align-items: center;
						flex-wrap: wrap;
						margin: auto;
					}

					/deep/ .el-form-item__content{
						display: flex;
						// width: 228px;
						font-size: 12px;
					}
					/deep/ .el-form-item{
						margin-left: 14px;
					}
					/deep/ .el-form-item__label{
						font-size: 12px;
						width: 120px;
					}
				}
				
				// table
				/deep/ .el-table .cell{
					font-size: 12px;
					text-align: center;
				}

				.table{
					padding: 12px;
				}
			}
		}

		// feet
		.feet {
			// alert
			.messagesBox{
				/deep/ .el-table{
					font-size: 12px;
				}
				.box{
					/deep/ .el-form-item__content{
						font-size: 12px;
					}
				}
			}
		}

	}
</style>